<template>
  <div class="components-container">
    <router-link to="role/create">
      <el-button type="primary" size="small" style="margin: 10px;"><i class="el-icon-plus" /> 新增用户组</el-button>
    </router-link>
    <el-card class="table_style">
      <el-table :data="roles" style="width: 100%" border>
        <el-table-column label="ID" prop="id" width="50px" />
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" @change="changeSort(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.createdAt|time_format }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210px">
          <template v-if="scope.row.id !== 1" slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑用户组" placement="top" enterable>
              <router-link :to="{ name: 'RoleEdit', params: { id: scope.row.id } }">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                />
              </router-link>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除用户组" placement="top" enterable>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                class="del_one"
                @click="handleDelete(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import '../../filter'
import { fetchRoleList, ChangeSortRole, deleteRole } from '@/api/role'

export default {
  data() {
    return {
      roles: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const res = await fetchRoleList()
      this.roles = res.data.roles
    },
    // 新增用户组
    handlerCreate() {
      this.$router.push({ name: 'UserCreate' })
    },
    // 排序
    async changeSort(row) {
      const res = await ChangeSortRole(row.id, { sort: row.sort })
      if (res.code === 20000) return this.init(); this.$message.success(res.message)
      this.$message.error(res.message)
    },
    // 删除用户
    handleDelete(row) {
      this.$confirm('删除该用户组也将其对应的权限一并删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        const res = await deleteRole(row.id)
        if (res.code === 20000) return this.init(); this.$message.success(res.message)
        this.$message.error(res.message)
      })
    }
  }
}
</script>

<style scoped>
.table_style {
  margin: 0 10px 0 10px;
}
.del_one{
  margin-left: 10px;
}
</style>
